<template>
  <!-- 任务列表 -->
  <div class="missions-wrapper">
    <div class="toolbar">
      <div class="tool">
        <cube-select
          title="Website"
          cancelTxt="Cancel"
          confirmTxt="Confirm"
          v-model="website"
          :options="websites"
          @change="websiteChange"
        ></cube-select>
      </div>
      <div class="tool">
        <cube-select
          title="Category"
          cancelTxt="Cancel"
          confirmTxt="Confirm"
          v-model="category"
          :options="categories"
          @change="categoryChange"
        ></cube-select>
      </div>
    </div>

    <cube-recycle-list class="list" infinite :size="size" :on-fetch="onFetch" :style="listStyle">
      <!-- <template slot="tombstone" slot-scope="props">
        <div class="item tombstone">
          <div class="avatar"></div>
          <div class="bubble">
            <p>Loading...</p>
            <p></p>
            <p></p>
            <div class="meta">
              <time class="posted-date"></time>
            </div>
          </div>
        </div>
      </template>-->
      <template slot="item" slot-scope="{ data }">
        <div :id="data.id" class="item elevation-2 card flex-center" :style="listStyle" @click="onItemClicked(data)">
          <div class="basic-info flex-center">
            <div class="flexbox">
              <div class="image-wrapper">
                <img class="product-image" :src="data.productImg" alt />
              </div>
              <div class="info-wrapper">
                <div class="flexbox column">
                  <div class="item-name text-left">{{ data.titleEnglish }}</div>
                  <div class="item-time text-left">{{ getTime(data.createTime) }}</div>
                </div>
                <div class="flexbox">
                  <div class="item-actions">
                    <div class="action text-left flexbox">
                      <span class="title">Price: $</span>
                      <span class="numbers">{{ data.price }}</span>
                    </div>
                    <div class="action text-center">{{ data.taskType | TaskType }}</div>
                    <div class="action text-left flexbox">
                      <span class="title">Reward: $</span>
                      <span class="numbers">{{ data.commission ? data.commission.toFixed(2) : '?'}}</span>
                    </div>
                    <div class="action flex-center">
                      <div class="btn-wrapper">
                        <cube-button
                          v-if="data.showButton"
                          outline
                          :disabled="data.scalped"
                          @click="onJoinMissionClicked(data)"
                        >Join mission</cube-button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </template>

      <div slot="spinner">Loading missions...</div>

      <div slot="noMore">No more missions.</div>
    </cube-recycle-list>

    <!-- <ul>
      <li v-for="(item, i) of missionList" :key="i" class="elevation-2 card flex-center wrap">
        <div class="basic-info flex-center column">
          <div class="item-name text-left">{{ item.titleEnglish }}</div>
          <div class="item-time text-left">{{ getTime(item.createTime) }}</div>
        </div>
        <div class="item-actions">
          <div class="action text-left">
            <span class="title">amount:</span>
            <span class="numbers">{{ item.amount }}</span>
          </div>

          <div class="action text-left">{{ item.taskType }}</div>
          <div class="action text-left">
            <span class="title">commission:</span>
            <span class="numbers">943</span>
          </div>
          <div class="action flex-center">
            <div class="btn-wrapper">
              <cube-button outline @click="onJoinMissionClicked(item)">Join mission</cube-button>
            </div>
          </div>
        </div>
      </li>
    </ul>-->
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { Api } from "@/api";
import { ReqTaskInfo } from "@/api/bean";
import { Pagination, KV } from "@/utils/types";
import { getTime } from "@/utils/commonUtils";
import Cookie from "js-cookie";
@Component
export default class Missions extends Vue {
  private categories: Array<KV> = [
    { text: "All", value: 0 },
    { text: "Prime Video", value: 1 },
    { text: "Music, CDs & Vinyl", value: 2 },
    { text: "Digital Music", value: 3 },
    { text: "Kindle Store", value: 4 },
    { text: "Arts & Crafts", value: 5 },
    { text: "Automotive", value: 6 },
    { text: "Baby", value: 7 },
    { text: "Beauty & Personal Care", value: 8 },
    { text: "Books", value: 9 },
    { text: "Computers", value: 10 },
    { text: "Electronics", value: 11 },
    { text: "Women's Fashion", value: 12 },
    { text: "Men's Fashion", value: 13 },
    { text: "Girls' Fashion", value: 14 },
    { text: "Boys' Fashion", value: 15 },
    { text: "Health & Household", value: 16 },
    { text: "Home & Kitchen", value: 17 },
    { text: "Industrial & Scientific", value: 18 },
    { text: "Luggage", value: 19 },
    { text: "Movies & Television", value: 20 },
    { text: "Pet Supplies", value: 21 },
    { text: "Software", value: 22 },
    { text: "Sports & Outdoors", value: 23 },
    { text: "Tools & Home Improvement", value: 24 },
    { text: "Toys & Games", value: 25 },
    { text: "Video Games", value: 26 }
  ];

  private websites: Array<KV> = [
    { text: "All Site", value: 0 },
    { text: "USA", value: 1 },
    { text: "France", value: 2 }
    // { text: "Brazil", value: 3 },
  ];

  private size: number = 100;
  private website: any = 1;
  private category: any = 1;

  private missionList: Array<any> = [
    {
      name: "black board",
      createTime: "2019203 34298"
    }
  ];

  private listStyle: any = {

  }

  private pagination: Pagination = {
    pageCount: 20,
    page: 1,
    limit: 100,
    offset: 0
  };

  private id: any = 0;

  protected mounted() {
    // this.getMissionList();
    let width: any = document.body.scrollWidth;
    this.listStyle = {
      width: width + 'px',
    }
  }

  private getTime(date: string) {
    return getTime(date);
  }

  // 抢单
  private onJoinMissionClicked(item: any) {
    this.joinMission(item);
  }

  private websiteChange(value: any) {}

  private categoryChange(value: any) {}

  /**
   * 拉到底部时用于获取数据
   */
  private onFetch() {
    let params: any = {};
    // params = queryForm;
    if (this.website !== 0) {
      params.siteId = this.website;
    }
    // let items: Array<any> = [];
    // return new Promise(resolve => {
    //   setTimeout(() => {
    //     for (let i = 0; i < this.size; i++) {
    //       items.push({

    //       });
    //     }
    //     resolve(items);
    //   }, 1000);

    //   // 每次将新的itemresolve进去
    // });
    if (this.pagination.offset > this.pagination.pageCount) {
      return false;
    }

    // console.log(this.pagination.offset, this.pagination.pageCount);

    return new Promise(resolve => {
      resolve(this.getMissionList(params));
    });
  }

  private onItemClicked(item: any) {}

  private onMissionDetail(data: any) {
    this.$router.push({
      name: "MissionDetail",
      params: data
    });
    sessionStorage.setItem("MissionDetail", JSON.stringify(data));
  }

  private async getMissionList(add: any) {
    const params: ReqTaskInfo = {
      offset: this.pagination.offset,
      limit: this.pagination.limit,
      ...add,
      publishStatus: 1
    };
    const { data } = await Api.getTaskList.r(params);
    console.log("getTaskList", data);
    if (data.result === 0) {
      // 设置总数
      this.pagination.pageCount = data.data.totalCount;
      this.pagination.offset += data.data.dataList.length;
      let userId: any = Cookie.get("buyer_userId");
      data.data.dataList.forEach((item: any) => {
        if (item.buyerUserIds !== null) {
          let userIds: Array<string> = item.buyerUserIds.split(",");
          if (userIds.indexOf(userId) === -1) {
            item.showButton = true;
          }
        } else{
          item.showButton = true;
        }
      });
      return data.data.dataList;
    } else {
      return [];
    }
  }

  /**
   * 任务抢单 抢单之后可以通过上传 订单和评价截图 用于完成任务
   */
  private async joinMission(task: any) {
    const params = {
      taskId: task.taskId
    };
    const { data } = await Api.competeOrder.r(params);
    console.log("getTaskList", data);
    if (data.result === 0) {
      task.scalped = true;
      this.$createDialog({
        type: "alert",
        title: "Attention",
        content: data.message,
        icon: "cubeic-alert",
        confirmBtn: {
          text: "OK",
          active: true,
          disabled: false,
          href: "javascript:;"
        }
      }).show();
    } else {
      alert(data.message);
    }
  }
}
</script>


<style lang="less" scoped>
.missions-wrapper {
  width: 100%;
  height: 100%;
  padding: 2px 0.3rem;
  .list {
    padding-top: 0.3rem;
    display: flex;
    flex-direction: column;
    width: 100%;
    // max-width: 100%;
    height: 100%;
    margin: 0 auto;
    padding: 0;
    border: 1px solid #ddd;
    list-style-type: none;
    text-align: center;
    .item {
      background-color: white;
      margin-bottom: 0.4rem;
      width: 100%;
      display: flex;
      padding: 6px 0;
      text-align: left;
      // height: 10rem;
      flex-direction: column;
      justify-content: space-between;
      box-sizing: border-box;
      .basic-info {
        // height: 4rem;
        // width: 375px;
        // border-bottom: 1px solid #ccc;
        .item-name {
          font-size: 1rem;
          padding: 4px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .item-time {
          font-size: 0.9rem;
          padding: 4px;
          color: #787878;
        }
        .image-wrapper {
          width: 30%;
          flex-basis: 30%;
        }
        .info-wrapper {
          width: 70%;
          flex-basis: 70%;
          padding: 0.2rem;
          box-sizing: border-box;
        }
        .product-image {
          max-width: 6rem;
          max-height: 6rem;
        }
      }
      .item-actions {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        padding: 2px 0.1rem;
        box-sizing: border-box;
        .action {
          flex-basis: 48%;
          width: 48%;
          height: 1.3rem;
          line-height: 1.3rem;
          .btn-wrapper {
            width: 6.8rem;
            height: 1.3rem;
            .cube-btn {
              padding: 2px 8px;
            }
          }
        }
      }
    }
  }
}

.list {
  // width: 375px;
  // max-width: 100%;
  // height: 100%;
  // margin: 0 auto;
  // padding: 0;
  // border: 1px solid #ddd;
  // list-style-type: none;
  // text-align: center;
  // .item {
  //   display: flex;
  //   padding: 10px 0;
  //   width: 100%;
  //   text-align: left;
  // }
  .avatar {
    border-radius: 50%;
    margin-left: 15px;
    margin-right: 6px;
    min-width: 48px;
    width: 48px;
    height: 48px;
    background-size: cover;
    outline: none;
  }
  p {
    margin: 0;
    word-wrap: break-word;
    font-size: 14px;
  }
  &.tombstone p {
    width: 100%;
    height: 0.5em;
    background-color: #ccc;
    margin: 0.5em 0;
  }
  .bubble {
    padding: 7px 10px;
    color: #333;
    background: #fff;
    box-shadow: 0 3px 2px rgba(0, 0, 0, 0.1);
    position: relative;
    max-width: 420px;
    min-width: 80px;
    margin: 0 20px 0 5px;
  }
  &:before {
    content: "";
    border-style: solid;
    border-width: 0 10px 10px 0;
    position: absolute;
    top: 0;
    left: -10px;
  }
  .meta {
    font-size: 0.8rem;
    color: #999;
    margin-top: 3px;
  }
}

.toolbar {
  height: 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #e8864c;
  .tool {
    flex: 1;
    padding: 0.3rem;
    box-sizing: border-box;
    .cube-select {
      padding: 5px 12px 5px 3px;
    }
  }
}
.title {
  font-size: 14px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.numbers {
  font-size: 13px;
  color: #676767;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.flexbox {
  width: 100%;
}
.basic-info {
  width: 100%;
}
</style>
